<template>
    <div>
        <li class="editorformItem">
            <div class="editorformItemName">是否边框</div>
            <div class="editorformItemFunc">
                <el-switch v-model="style.outline" @change="change('outline', style.outline)" style="--el-switch-on-color: rgba(32, 160, 255)" />
            </div>
        </li>
        <li class="editorformItem" v-if="style.outline">
            <div class="editorformItemName">边框颜色</div>
            <div class="editorformItemFunc">
                <el-color-picker :predefine="defaultColor" @change="change('outlineColor', style.outlineColor)" show-alpha class="editorforminput" v-model="style.outlineColor" />
            </div>
        </li>
        <li class="editorformItem" v-if="style.outline">
            <div class="editorformItemName">边框宽度</div>
            <div class="editorformItemFunc">
                <el-input-number v-model="style.outlineWidth" @input="change('outlineWidth', style.outlineWidth)" class="editorforminput" :step="1" conliols-position="right" :min="1" />
            </div>
        </li>
    </div>
</template>
<script setup lang="ts">
import { reactive, computed } from "vue";
import { defaultColor } from "@/config/config";
import * as lodash from "lodash";
interface Props {
    graphic?: any;
}
const props = withDefaults(defineProps<Props>(), {
    graphic: {} as any,
});
let layer: any = reactive({});
layer = computed(() => {
    return props.graphic;
});
const style: any = reactive(layer.value.style);
const change = (opt: string, val: any) => {
    setTimeout(() => {
        switch (opt) {
            case "outline":
                props.graphic.setStyle({ outline: val });
                break;
            case "outlineColor":
                props.graphic.setStyle({ outlineColor: val });
                break;
            case "outlineWidth":
                props.graphic.setStyle({ outlineWidth: val });
                break;
            default:
                props.graphic.setStyle(style);
        }
    }, 100);
};
</script>
